<template>
  <div class="login_container">
    <!-- 登录盒子 -->
    <div class="login_box">
      <!-- 头像 -->
      <div class="avatar_box">
        <img src="../assets/heima.png" />
      </div>
      <!-- 登录表单 1. form表单绑定数据   :model   2.将input进行数据绑定  v-model-->
      <el-form
        class="login_form"
        :model="loginForm"
        :rules="loginFormRules"
        ref="loginFormRef"
      >
        <el-form-item prop="username">
          <el-input
            prefix-icon="iconfont icon-user"
            v-model="loginForm.username"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            prefix-icon="iconfont icon-3702mima"
            v-model="loginForm.password"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item class="login_btn">
          <el-button
            @click="toBigScreen"
            icon="el-icon-s-promotion"
            class="toBigScreen"
            >点此进入大屏</el-button
          >
          <el-button type="text" @click="loginFormReset">重置</el-button>
          <el-button type="primary" @click="login">登录</el-button>
          <el-button @click="regDialogVisible = true">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-dialog
      title="注册"
      :visible.sync="regDialogVisible"
      width="30%"
      @close="regUserFormClose"
    >
      <el-form
        ref="regUserRef"
        :model="regUserFormData"
        label-width="80px"
        :rules="regUsersRules"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="regUserFormData.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="regUserFormData.password" show-password></el-input>
        </el-form-item>
        <!-- <el-form-item label="昵称" prop="nickname">
          <el-input v-model="addUserFormData.nickname"></el-input>
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="regDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="regUser">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 3.定义form表单初始数据
      loginForm: {
        username: "admin",
        password: "123456",
      },
      regDialogVisible: false,
      loginFormRules: {
        username: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
          {
            min: 3,
            max: 10,
            message: "用户名长度必须在3-10个字之间",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            min: 4,
            max: 15,
            message: "密码长度必须在4-15个字之间",
            trigger: "blur",
          },
        ],
      },
      regUserFormData: {
        username: "admin",
        password: "123456",
      },
      // 添加用户校验规则
      regUsersRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "用户名长度需要在3-10个字符之间！",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 4,
            max: 15,
            message: "密码需要在4-15个字符之间！",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    toBigScreen() {
      this.$router.push("/bigscreen");
    },
    loginFormReset() {
      //   重置表单数据、
      //  1.在el-form中设置 ref
      //  2.查看this中的$refs
      //  3.对el-form-item设置prop
      //  4.调用重置函数
      console.log(this);
      this.$refs.loginFormRef.resetFields();
    },
    login() {
      this.$refs.loginFormRef.validate(async (valid) => {
        if (!valid) {
          this.$message.error("请姓名和密码按要求补全");
        } else {
          let { data: res } = await this.$http.post("login", this.loginForm);
          if (res.meta.status == 200) {
            this.$message.success(res.meta.msg);
            console.log(res.data.token);
            window.sessionStorage.setItem("token", res.data.token);
            console.log("保存了token" + res.data.token);
            console.log(this);
            this.$router.push("/welcome");
          } else {
            this.$message.error(res.meta.msg);
          }
        }
      });
    },
    regUser() {
      this.$refs.regUserRef.validate(async (valid) => {
        if (valid) {
          // 向后端发送添加请求
          let { data: res } = await this.$http.post(
            "reguser",
            this.regUserFormData
          );
          // 判断状态码
          if (res.meta.status !== 200) {
            this.$message.error(res.meta.msg);
          } else {
            this.$message.success(res.meta.msg);
            this.regDialogVisible = false;
          }
        } else {
          return;
        }
      });
    },
    regUserFormClose() {
      this.$refs.regUserRef.resetFields();
    },
  },
};
</script>
<style lang="less" scoped>
.login_container {
  /* 加载背景图 */
  background-image: url(../assets/bg.jpg);
  /* 背景图垂直、水平均居中 */
  background-position: center center;
  /* 背景图不平铺 */
  background-repeat: no-repeat;
  /* 让背景图基于容器大小伸缩 */
  background-size: cover;
  //   background: fixed;
  height: 100%;
  .login_box {
    width: 450px;
    height: 300px;
    background: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(78, 43, 10, 0.705);
    border-radius: 20px;
    .avatar_box {
      height: 130px;
      width: 130px;
      border: 1px solid #eee;
      border-radius: 50%;
      box-shadow: 0 0 10px #ddd;
      padding: 10px;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #eee;
      }
    }
    .login_form {
      position: absolute;
      bottom: 0px;
      width: 100%;
      padding: 0px 20px;
      box-sizing: border-box;
      .login_btn {
        display: flex;
        justify-content: flex-end;
        .toBigScreen {
          left: -18.8%;
          position: relative;
        }
      }
    }
  }
}
</style>